<style lang="scss">
@import "./index.scss";
</style>
<template>
  <div class="login-container"
       @keyup.enter="login">
    <div class="top_div"></div>
    <div style="background: rgb(255, 255, 255); margin: -100px auto auto; border: 1px solid rgb(231, 231, 231);border-image:none;width:400px;text-align: center;">
      <form method="post"
            id="loginform"
            :loading="true">
        <input type="hidden"
               name="${_csrf.parameterName}"
               value="${_csrf.token}" />
        <div style="width: 165px; height: 96px; position: absolute;">
          <div class="tou"></div>
          <div class="initial_left_hand"
               id="left_hand"></div>
          <div class="initial_right_hand"
               id="right_hand"></div>
        </div>
        <P style="padding: 30px 0px 10px; position: relative;">
          <span class="u_logo"></span>
          <input class="ipt"
                 v-focus
                 type="text"
                 v-model="form.username"
                 placeholder="请输入登录名" />
        </P>
        <P style="position: relative;">
          <span class="p_logo"></span>
          <input class="ipt"
                 type="password"
                 v-model="form.password"
                 placeholder="请输入密码"
                 id="password" />
        </P>
        <P style="padding: 10px 0px 10px; position: relative;">
          <input class="captcha"
                 type="text"
                 v-model="form.captcha"
                 placeholder="请输入验证码" />
          <img id="captcha"
               alt="验证码"
               :src="constant.baseApiPath+'/common/captcha.jpg'"
               :data-src="constant.baseApiPath+'/common/captcha.jpg?t='"
               style="vertical-align:middle;border-radius:4px;width:94.5px;height:35px;cursor:pointer;">
        </P>
        <P style="position: relative;text-align: left;">
          <input class="rememberMe"
                 type="checkbox"
                 v-model="rememberMeCheck"
                 style="vertical-align:middle;margin-left:40px;height:20px;" /> 记住密码
        </P>
        <div style="height: 50px; line-height: 50px; margin-top: 10px;border-top-color: rgb(231, 231, 231); border-top-width: 1px; border-top-style: solid;">
          <P style="margin: 0px 35px 20px 45px;">
            <span style="float: left;">
              <a style="color: rgb(204, 204, 204);"
                 href="javascript:;">忘记密码?</a>
            </span>
            <span style="float: right;">
              <a style="color: rgb(204, 204, 204); margin-right: 10px;"
                 href="javascript:;">注册</a>
              <a style="background: rgb(0, 142, 173); padding: 7px 10px; border-radius: 4px; border: 1px solid rgb(26, 117, 152); border-image: none; color: rgb(255, 255, 255); font-weight: bold;"
                 href="javascript:;"
                 @click="login">登录</a>
            </span>
          </P>
        </div>
      </form>
    </div>
    <div style="text-align:center;">
      <p>
        <a href="javascript:;">shiro-vue 开源框架</a>
      </p>
    </div>
  </div>
</template>
<script>
import jQuery from 'jquery'
import constant from '@/utils/constant'

export default {
  data () {
    return {
      rememberMeCheck: true,
      constant,
      form: {
        username: 'admin',
        password: 'test',
        captcha: '',
        rememberMe: 1
      }
    }
  },
  watch: {
    rememberMeCheck (bool) {
      if (bool) {
        this.form.rememberMe = 1
      } else {
        this.form.rememberMe = 0
      }
    }
  },
  created () {

  },
  mounted () {
    const $ = jQuery
    // 得到焦点
    $('#password').focus(function () {
      $('#left_hand').animate({
        left: '150',
        top: ' -38'
      }, {
        step: function () {
          if (parseInt($('#left_hand').css('left')) > 140) {
            $('#left_hand').attr('class', 'left_hand')
          }
        }
      }, 2000)
      $('#right_hand').animate({
        right: '-64',
        top: '-38px'
      }, {
        step: function () {
          if (parseInt($('#right_hand').css('right')) > -70) {
            $('#right_hand').attr('class', 'right_hand')
          }
        }
      }, 2000)
    })
    // 失去焦点
    $('#password').blur(function () {
      $('#left_hand').attr('class', 'initial_left_hand')
      $('#left_hand').attr('style', 'left:100px;top:-12px;')
      $('#right_hand').attr('class', 'initial_right_hand')
      $('#right_hand').attr('style', 'right:-112px;top:-12px')
    })
    // 验证码
    $('#captcha').click(function () {
      var $this = $(this)
      var url = $this.data('src') + new Date().getTime()
      $this.attr('src', url)
    })
  },
  methods: {
    login () {
      const _this = this
      _this.$store.dispatch('user/login', _this.form).then(() => {
        _this.$router.push({ path: _this.redirect || '/', query: _this.otherQuery })
      }).catch(() => {

      })
      _this.resetCaptcha()
    },
    resetCaptcha () {
      jQuery('#captcha').click()
    }
  }
}
</script>
